<!-- 简单的toolbar组件-->
<template>
	<view class="dam-flex_row v_bg" :style="{position:fixed?'fixed':'relative'}">
		<view class="v_left dam-flex_row" @click="onLeftClick">
			<!--<icon :class="'ic_left '+leftIconClass" :color="leftIconColor" type=""></icon>-->
			<slot name=left>
				<text class="dam-flex_row dam-txt_title">{{leftTitle}}</text>
			</slot>
		</view>
		<view class="v_center dam-flex_row">
			<text class="txt_title" :style="titleStyle">{{title}}</text>
		</view>
		<view class="v_right dam-flex_row" @click="onRightClick">
			<slot name="right">
				<text class="dam-flex_row dam-txt_title">{{rightTitle}}</text>
			</slot>
		</view>
	</view>
	<view v-if="userDivider" class="v_divider"></view>
</template>

<script lang="ts" setup>
	import { storeToRefs } from 'pinia';
	import { usePageStore } from "@/dam_uni_frame/stores/stores";
	import { watch } from 'vue';
	import ThemeColorUtil from '@/jzutils/ThemeColorUtil';
	const themeStore = ThemeColorUtil.useThemeStore();
	const { themeData } = storeToRefs(themeStore);

	const pageStore = usePageStore();
	const { toolbarH, safeAreaTopH } = storeToRefs(pageStore);

	const props = defineProps({
		// 背景颜色
		bgColor: {
			type: String,
			default: '#ffffff'
		},
		fixed: {
			type: Boolean,
			default: false,
		},
		title: {
			type: String,
			default: ''
		},
		leftTitle: {
			type: String,
			default: ''
		},
		rightTitle: {
			type: String,
			default: ''
		},
		rightColor: {
			type: String,
			default: '#000000'
		},
		leftIconClass: {
			type: String,
			default: 'damicon damicon-back'
		},
		leftIconColor: {
			type: String,
			default: '#1b1b1b'
		},
		titleStyle: {
			type: String,
			default: ''
		},
		userDivider: {
			type: Boolean,
			default: true
		}
	})

	const emits = defineEmits(['leftClick', 'rightClick']);
	function onLeftClick() {
		emits('leftClick')
	}
	function onRightClick() {
		emits('rightClick')
	}
</script>

<style lang="scss" scoped>
	@import '/dam_uni_frame/styles/dam_theme_common.scss';

	.v_bg {
		background-color: v-bind('bgColor');
		height: v-bind('pageStore.getToolbarHeight()');
		padding-top: v-bind('pageStore.getSafeAreaTopHeight()');
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		width: 100%;
	}

	.v_left {
		height: 100%;
		justify-content: flex-start;
		align-items: center;
		box-sizing: border-box;
		width: 20%;

		.ic_left {
			font-size: 16px;
			margin-left: 10px;
		}
	}

	.v_right {
		height: 100%;
		justify-content: flex-end;
		align-items: center;
		box-sizing: border-box;
		width: 20%;

		.ic_right {
			font-size: 16px;
		}
	}

	.dam-txt_title {
		height: 100%;
		width: 100%;
		padding: 0 $dam-margin2;
		box-sizing: border-box;
		color: v-bind(rightColor);
		font-size: $dam-size-font-title2;
		text-align: center;
		justify-content: center;
		align-items: center;
	}

	.v_center {
		position: absolute;
		align-items: center;
		justify-content: center;
		width: 60%;
		margin-left: 20%;
	}

	.txt_title {
		font-size: 18px;
		color: #1b1b1b;
		font-weight: bold;
	}

	.v_divider {
		height: 1.5px;
		width: 100%;
		background-color: #ecedf3;
	}
</style>